There are two ways to implement the dialog spell checker (using an ASPX popup page, or through a jQuery Dialog and AJAX call), and therefore two ways to customize the dialog:
.ASPX based popup pages (housed in their own popup windows) are the default (and traditional) way to implement dialog spell checking.
It is possible to customize the layout of the spell checker using a HTML template mechanism. This is done by specifying the Layout.Html property with a string of HTML using special tags to indicate the position of the essential spell checker elements. The tags are <PreviewPane/>*, <AddButton/>, <IgnoreButton/>, <IgnoreAllButton/>, <UndoButton>, <FieldDisplayLabel/>, <ChangeButton/>, <ChangeAllButton/>, <FinishButton/>, <OptionsButton/>, <ChangeToLabel/>, <ChangeToBox/>*, <SuggestionsLabel/>, <SuggestionsBox/>* - tags marked with * are required for correct functionality.
Page containing the RapidSpellWeb control, note because this has different dimensions you should
modify the dialog_width and dialog_height properties in the dialog parameters
to 530 and 250 respectively, eg;
rapidSpell.dialog_width = 530; and rapidSpell.dialog_height = 250;
Call this in the page that launches the dialog spell check.
Put the code below into an ASPX page and point the spell checker to it using rapidSpell.dialog_popupURL='path_to_file.aspx';
<%@ Page Language="C#"%>
<%@ Register TagPrefix="RapidSpellWeb" Namespace="Keyoti.RapidSpell"
Assembly="Keyoti.RapidSpellWeb.ASP.NETv4" %>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<body>
<RapidSpellWeb:RapidSpellWeb id="rapidSpellWeb" runat="server">
<ChangeToBox Style="font-size:9pt; width:200px"/>
<SuggestionsBox Style="font-size:9pt; width:200px"/>
<PreviewPaneStyle Width="200" Height="190"/>
<Layout Html="
<table border=0>
<tr><td colspan=3 bgcolor='#eeeeee'><b>MyCo Spell Checking</b>
</td></tr><tr><td>
<PreviewPane/>
</td><td>
<ChangeToLabel/>
<br>
<ChangeToBox/>
<br>
<SuggestionsLabel/>
<br>
<SuggestionsBox/>
</td><td>
<table border=0><tr><td>
<IgnoreButton/>
</td></tr><tr><td>
<IgnoreAllButton/>
</td></tr><tr><td>
<AddButton/>
</td></tr><tr><td>
<ChangeButton/>
</td></tr><tr><td>
<ChangeAllButton/>
</td></tr><tr><td>
<UndoButton/>
</td></tr>
<tr><td>
<OptionsButton/>
</td></tr>
<tr><td>
<FinishButton/>
</td></tr></table>
</td></tr></table>
"/>
</RapidSpellWeb:RapidSpellWeb>
</body>
</html>
The only restriction is that the special tags must be on a line by themselves.
If the jQuery Dialog is used (ie. if rapidSpell.dialog_setUseDivDialog(true); is called on the page), then the custom dialog is implemented by adding the UI elements to the page where the spell checker is used.
<script type="text/javascript">
rapidSpell.dialog_setUseDivDialog(true);
rapidSpell.dialog_default_width = 500;
rapidSpell.dialog_default_height= 350;
</script>
<style type='text/css'>
#rsw_documentTextPanel
{
border: 1px solid #aaa;
border-radius: 3px;
}
#rsw_word, #rsw_suggestions
{
border: 1px solid #aaa;
border-top-color: #a0a0a0;
}
#rsw_optionsDialog
{
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 295px;
height: 230px;
z-index: 101;
background-color: white;
border: 1px solid #444;
border-radius: 5px;
padding: 8px;
}
#rsw_optionsDialog_Backing
{
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(100,100,100,.60);
z-index: 100;
}
#rsw_optionsDialog > label
{
display: block;
padding-bottom: 12px;
}
#rsw_optionsDialog > input
{
margin-right: 9px;
margin-top:12px;
}
#rsw_optionsHeader
{
font-size: 1.2em;
border-bottom: 1px solid #aaa;
}
#rsw_documentTextPanel
{
border: 1px solid #aaa;
border-radius: 3px;
text-align: justify;
padding:4px;
overflow-y:scroll;
margin-bottom:4px;
}
.badWordHighlight{
background-position: bottom;background-repeat: repeat-x;background-color: #ededff;
}
#rsw_documentTextPanel{
height: 150px;
}
#rsw_changePanel{
width: 200px;
float:left;
}
#rsw_buttonPanel{
width:250px;
float:right;
}
#rsw_buttonPanel div, #rsw_buttonPanel input{
margin-right:0px;
width:100px;
font-size:9pt;
}
#rsw_optionsButton
{
font-size:9pt;
}
#rsw_dialog input, #rsw_dialog select {
margin:4px;
}
#rsw_buttonPanel input{
margin: 10px;
}
#rsw_dialog
{
font-family:'Segoe UI', Arial, sans-serif;
font-size:10pt;
padding:10px;
z-index:500;
}
#rsw_word
{
width:197px;
}
#rsw_suggestions
{
width:200px;
}
#rsw_fdtl
{
line-height:24px;
}
</style>
....
<div id="rsw_dialog" nospell="true" title="Custom Spell Check" style="display:none;">
<form id="spellCheckerForm" onsubmit="rsw_change(); return false;">
<div id="rsw_fdtl"></div>
<div id="rsw_documentTextPanel">
</div>
<div id="rsw_changePanel">
<label for="rsw_word"><span>Change To:</span></label>
<input name="rsw_word" type="text" id="rsw_word" size="16" tabindex="4" />
<label for="rsw_suggestions"><span>Suggestions:</span></label>
<select name="rsw_suggestions" id="rsw_suggestions" size="6" onchange="rsw_changeSuggestions()" ondblclick="rsw_change()" tabindex="5">
<option value="No Suggestions.">No Suggestions.</option>
</select>
</div>
<div id="rsw_buttonPanel">
<div style="display: inline-block;">
<input type="button" value="Ignore" id="rsw_ignoreButton" onclick="rsw_ignoreCurrent()" tabindex="1" name="rsw_ignoreButton" />
<input type="button" value="Ignore All" id="rsw_ignoreAllButton" onclick=" rsw_ignoreAllInstances()" tabindex="2" name="rsw_ignoreAllButton" />
<input type="button" value="Add" id="rsw_addButton" onclick="rsw_addCurrent()" tabindex="3" name="rsw_addButton" />
<input type="button" value="Options..." id="rsw_optionsButton" onclick="rsw_showOptions()" tabindex="10" name="rsw_optionsButton" />
</div>
<div style="display: inline-block;">
<input type="button" value="Change" id="rsw_changeButton" onclick=" rsw_change()" tabindex="6" name="rsw_changeButton" />
<input type="button" value="Change All" id="rsw_changeAllButton" onclick=" rsw_changeAll()" tabindex="7" name="rsw_changeAllButton" />
<input type="button" value="Undo" id="rsw_undoButton" onclick=" rsw_undoChange()" tabindex="8" name="rsw_undoButton" />
<input type="button" value="Finish" id="rsw_cancelButton" onclick=" rsw_finish(true)" tabindex="9" name="rsw_cancelButton" />
</div>
</div>
</form>
<div id="rsw_optionsDialog">
<h1 id="rsw_optionsHeader">Basic Settings</h1>
<label>
<input type="checkbox" id="IgnoreCapitalizedWords"/>Ignore words in UPPERCASE</label>
<label><input type="checkbox" id="IgnoreWordsWithDigits"/>Ignore words with numbers</label>
<label><input type="checkbox" id="IgnoreURLsAndEmailAddresses"/>Ignore internet addresses and emails</label>
<label><input type="checkbox" id="IgnoreCase"/>Ignore improper case (eg. "australia", "tABle")'</label>
<input type="button" value="OK" onclick=" rsw_saveOptions()"/>
<input type="button" value="Cancel" onclick=" rsw_cancelOptions()"/></div>
<div id="rsw_optionsDialog_Backing"></div>
</div>
When a DIV with id=rsw_dialog is included on the page, it is assumed that this will contain all the necessary UI elements, and this will be used instead of generating new ones. In order to hide elements (such as buttons), it is recommended that they are hidden with display:none (CSS) rather than removed from the HTML markup (as this could cause Javascript errors).